<template>
    <div class="account">
        <div class="top">
            <div class="px-90"></div>
            <div>
                <span class="px-30 py-10 title fs-13">现有账户</span>
            </div>
        </div>
        <div class="top">
            <div class="left px-90 fr-ac">
                <form-view
                    :list="formList"
                    :size="'large'"
                    :buttonStyleR="purple"
                    @getFromValue="submit"
                    ref="formViewRef"
                ></form-view>
            </div>
            <div class="right py-15 px-15">
                <div class="fr-ac py-15">
                    <div v-for="item in buttonlist" :key="item.id">
                        <div v-if="item.id === 1" class="fr-ac mr-60">
                            <el-input
                                v-model="item.model"
                                :placeholder="item.placeholder"
                            ></el-input>
                            <el-button
                                class="mx-15"
                                :style="purple"
                                @click="search(item)"
                                >{{ item.title }}</el-button
                            >
                        </div>
                        <el-button
                            class="mx-5"
                            :style="purple"
                            v-if="item.id !== 1"
                            @click="search(item)"
                            >{{ item.title }}</el-button
                        >
                    </div>
                </div>
                <table-view
                    :data="tableData"
                    :propList="tableProp"
                    :total="tableTotal"
                    @pageClick="tablePage"
                ></table-view>
            </div>
        </div>
        <dialog-view
            :dialog="accountDEL"
            @close="close"
            width="20%"
            title="删除账户"
            :spacing="8"
            :background="accountdelBG"
        >
            <template #main>
                <div class="px-20 py-20">
                    <p class="fs-10">
                        确定删除该账户，并且将其对应客户释放到待分配列表
                    </p>
                    <div class="fr-ac-jsa mt-10">
                        <el-button :style="purple" @click="confirm"
                            >确定</el-button
                        >
                        <el-button :style="purple" @click="close"
                            >取消</el-button
                        >
                    </div>
                </div>
            </template>
        </dialog-view>
        <dialog-view
            :dialog="accountSHARE"
            @close="close"
            width="60%"
            title="重新分配"
            :spacing="8"
            :background="accountdelBG"
        >
            <template #main>
                <div class="px-20 py-10">
                    <p class="bold fs-15 pb-15">
                        <span>{{ accountInfo.account }}</span>
                        <span class="px-15">{{ accountInfo.nickname }}</span>
                        <span class="pr-15">{{ accountInfo.crowd }}</span>
                        <span>的客户情况：</span>
                    </p>
                    <table-view
                        :data="tableViewData"
                        :propList="tableViewProp"
                        :total="tableViewTotal"
                        :spacing="20"
                        @pageClick="tableViewPage"
                    ></table-view>
                </div>
            </template>
        </dialog-view>
        <dialog-view
            :dialog="accountSERVICE"
            @close="serviceCloae"
            width="20%"
            title="服务分配"
            :spacing="8"
            :background="accountdelBG"
        >
            <template #main>
                <div class="px-20 py-10">
                    <p class="pb-15 fs-10">
                        <span>{{ viewInfo.phone }}</span>
                        <span class="px-15">{{ viewInfo.name }}</span>
                        <span>的服务分配：</span>
                    </p>
                    <form-view
                        :list="formViewList"
                        :size="'large'"
                        ref="viewListRef"
                        :height="0"
                        @getFromValue="viewSubmit"
                        :formButton="false"
                    ></form-view>
                    <div class="fr-ac-jsa mt-10">
                        <el-button :style="purple" @click="serviceSave"
                            >确定保存</el-button
                        >
                        <el-button :style="purple" @click="serviceClose"
                            >重置设置</el-button
                        >
                    </div>
                </div>
            </template>
        </dialog-view>
    </div>
</template>
<script  setup>
import { onMounted, ref } from "vue";
import { purple } from "@/comment/data";
import {
    accountAdd,
    accountList,
    accountDel,
    accountShare,
    selectList,
    accountBatch,
} from "./volunteer";
import { debounce, throttle } from "lodash";
import {
    updateMessage,
    updateOrGetValue,
    optionsArray,
} from "@/comment/method";
import { useUserStore } from "@/store/userStore";
const userStore = useUserStore();
const formList = ref([
    {
        id: 1,
        prefix: false,
        type: "",
        label: "账号ID",
        model: "",
        prop: "account",
        suffixIcon: "",
        rules: [
            {
                required: true,
                message: "请输入账号",
                trigger: ["blur", "change"],
            },
            {
                pattern: /^[a-zA-Z_]{5,20}$/,
                message: "账号格式不正确(最少5位)",
                trigger: "blur",
            },
        ],
        formType: "input",
        placeholder: "请输入英文账户名",
        list: [],
    },
    {
        id: 2,
        prefix: false,
        type: "password",
        label: "账号密码",
        model: "",
        prop: "password",
        suffixIcon: "",
        rules: [
            {
                required: true,
                message: "请输入密码",
                trigger: ["blur", "change"],
            },
            {
                pattern: /^[a-zA-Z0-9]{6,20}$/,
                message: "格式不正确(含字母数字最少6位)",
                trigger: "blur",
            },
        ],
        formType: "input",
        placeholder: "请输入登录密码",
        list: [],
    },
    {
        id: 3,
        prefix: false,
        type: "",
        label: "账号昵称",
        model: "",
        prop: "nickname",
        suffixIcon: "",
        rules: [
            {
                required: true,
                message: "请输入密码",
                trigger: ["blur", "change"],
            },
            {
                pattern: /^[\u4e00-\u9fa5]+$/,
                message: "必须是中文",
                trigger: "blur",
            },
        ],
        formType: "input",
        placeholder: "请输入账号昵称",
        list: [],
    },
    {
        id: 4,
        prefix: false,
        type: "",
        label: "账号身份",
        model: "",
        prop: "crowd",
        rules: [
            {
                required: true,
                message: "请选择账号身份",
                trigger: ["blur", "change"],
            },
        ],
        suffixIcon: "CaretBottom",
        formType: "select",
        placeholder: "请选择省份",
        list: [
            {
                value: "1",
                label: "管理员",
            },
            {
                value: "2",
                label: "审核员",
            },
            {
                value: "3",
                label: "填报师",
            },
            {
                value: "4",
                label: "助理",
            },
        ],
    },
    {
        id: 5,
        prefix: false,
        type: "",
        label: "标签备注",
        model: "",
        prop: "remark",
        suffixIcon: "",
        rules: [],
        formType: "input",
        placeholder: "请填写特殊备注",
        list: [],
    },
]);
const formViewRef = ref(null);
const tableData = ref([]);
const tableTotal = ref(0);
const tableProp = ref([
    {
        id: 1,
        prop: "id",
        label: "ID",
    },
    {
        id: 2,
        prop: "account",
        label: "账号ID",
    },
    {
        id: 3,
        prop: "nickname",
        label: "昵称",
    },
    {
        id: 4,
        prop: "crowd",
        label: "身份",
    },
    {
        id: 5,
        prop: "allocation_num",
        label: "分配客户",
    },
    {
        id: 6,
        prop: "complete_num",
        label: "完成客户",
    },
    {
        id: 7,
        prop: "",
        label: "",
        operate: [
            {
                id: 1,
                label: "重新分配",
                isPopover: false,
                tooltip: "",
                style: purple,
                void: (val) => {
                    accountInfo.value = val;
                    accountSHARE.value = true;
                    share(1, val.id);
                },
            },
            {
                id: 2,
                label: "删除账户",
                isPopover: false,
                tooltip: "",
                style: purple,
                void: (val) => {
                    accountDEL.value = true;
                    accountId.value = val.id;
                },
            },
        ],
    },
]);
const buttonlist = ref([
    {
        id: 1,
        title: "搜索",
        placeholder: "请输入搜索关键字",
        model: null,
    },
    {
        id: 2,
        title: "只看审核",
        placeholder: "",
        model: 2,
    },
    {
        id: 3,
        title: "只看填报",
        placeholder: "",
        model: 3,
    },
    {
        id: 4,
        title: "只看助理",
        placeholder: "",
        model: 4,
    },
    {
        id: 5,
        title: "返回列表",
        placeholder: "",
        model: null,
    },
]);
const accountDEL = ref(false);
const accountdelBG = ref(
    "url(https://file.gkzzd.cn/www/gkzzd/uploads/20250625/d8fb87ce99e397e759bde7c949029956.jpg) no-repeat"
);
const accountId = ref(null);
const tableViewData = ref([]);
const tableViewTotal = ref(0);
const tableViewProp = ref([
    {
        id: 1,
        prop: "id",
        label: "编号",
    },
    {
        id: 2,
        prop: "phone",
        label: "手机号",
    },
    {
        id: 3,
        prop: "name",
        label: "姓名",
    },
    {
        id: 4,
        prop: "xk",
        label: "选科",
    },
    {
        id: 5,
        prop: "trade_time",
        label: "成交时间",
    },
    {
        id: 6,
        prop: "trade_price",
        label: "成交金额",
    },
    {
        id: 7,
        prop: "servce",
        label: "服务情况",
    },
    {
        id: 8,
        prop: "schedule",
        label: "进度",
    },
    {
        id: 9,
        prop: "",
        label: "操作",
        operate: [
            {
                id: 1,
                label: "客户转移",
                isPopover: false,
                tooltip: "",
                style: purple,
                void: (val) => {
                    viewInfo.value = val;
                    accountSERVICE.value = true;
                    updateOrGetValue(
                        1,
                        "model",
                        formViewList.value,
                        val.assistant_id ? val.assistant_id : ""
                    );
                    updateOrGetValue(
                        2,
                        "model",
                        formViewList.value,
                        val.filling_id ? val.filling_id : ""
                    );
                    updateOrGetValue(
                        3,
                        "model",
                        formViewList.value,
                        val.check_id ? val.check_id : ""
                    );
                },
            },
        ],
    },
]);
const accountSHARE = ref(false);
const accountInfo = ref({});
const accountSERVICE = ref(false);
const viewInfo = ref({});
const formViewList = ref([
    {
        id: 1,
        prefix: false,
        type: "",
        label: "设置助理为:",
        model: "",
        prop: "assistant",
        rules: [],
        suffixIcon: "CaretBottom",
        formType: "select",
        placeholder: "选择人员",
        list: [],
    },
    {
        id: 2,
        prefix: false,
        type: "",
        label: "设置填报师为:",
        model: "",
        prop: "filling",
        rules: [],
        suffixIcon: "CaretBottom",
        formType: "select",
        placeholder: "选择人员",
        list: [],
    },
    {
        id: 3,
        prefix: false,
        type: "",
        label: "设置审核师为:",
        model: "",
        prop: "check",
        rules: [],
        suffixIcon: "CaretBottom",
        formType: "select",
        placeholder: "选择人员",
        list: [],
    },
]);
const viewListRef = ref(null);

const submit = async (val) => {
    let data = {
        ...val,
        province: userStore.user.province,
    };
    const res = await accountAdd(data);
    list();
    formViewRef.value.resetForm();
};
const list = async (page = 1, search = "", crowd = "") => {
    const res = await accountList({
        limit: 10,
        page: page,
        search: search,
        crowd: crowd,
        province: userStore.user.province,
    });
    tableData.value = res.lists;
    tableTotal.value = res.total;
};
const share = async (page = 1, id) => {
    const res = await accountShare({
        limit: 10,
        page: page,
        id: id,
    });
    let lists = res.lists.map((item) => {
        return {
            ...item,
            trade_price: `${item.trade_price}元`,
        };
    });
    tableViewData.value = lists;
    tableViewTotal.value = Number(res.total);
};
const select = async () => {
    const res = await selectList({
        province: userStore.user.province,
    });
    let assistant = optionsArray(res.assistant, "id", "nickname");
    let filling = optionsArray(res.filling, "id", "nickname");
    let check = optionsArray(res.check, "id", "nickname");
    updateOrGetValue(1, "list", formViewList.value, assistant);
    updateOrGetValue(2, "list", formViewList.value, filling);
    updateOrGetValue(3, "list", formViewList.value, check);
};
const tablePage = (val) => {
    list(val);
};
const tableViewPage = (val) => {
    share(val, accountInfo.value.id);
};
const search = (val) => {
    switch (val.id) {
        case 1:
            list(1, val.model);
            break;
        case 2:
        case 3:
        case 4:
            list(1, buttonlist.value[0].model, val.model);
            break;
        case 5:
            list();
            updateOrGetValue(1, "model", buttonlist.value, "");
            break;
    }
};
const close = () => {
    accountDEL.value = false;
    accountSHARE.value = false;
};
const serviceCloae = () => {
    accountSERVICE.value = false;
    updateOrGetValue(1, "model", formViewList.value, "");
    updateOrGetValue(2, "model", formViewList.value, "");
    updateOrGetValue(3, "model", formViewList.value, "");
};
const confirm = async () => {
    const res = await accountDel({
        id: accountId.value,
    });
    list();
    close();
    updateMessage("删除成功", "success");
};
const serviceSave = () => {
    viewListRef.value.submitForm();
};
const serviceClose = () => {
    viewListRef.value.resetForm();
};
const viewSubmit = async (val) => {
    let data = {
        ...val,
        ids: viewInfo.value.id,
    };
    const rea = await accountBatch(data);
    list();
    share(1, accountInfo.value.id);
    serviceCloae();
};

onMounted(() => {
    list();
    select();
});
</script>
<style lang="scss" scoped>
.account {
    height: calc(100vh - 90px);
    padding: 90px 100px;
    box-sizing: border-box;
    .top {
        display: grid;
        grid-template-columns: 5fr 10fr;
        gap: 30px;
    }
    .title {
        display: inline-block;
        background: #4c41b2;
        border: 1px solid #4c41b2;
        color: #fff;
    }
    .left {
        height: calc(100vh - 322px);
        overflow: auto;
    }
    .right {
        border-radius: 5px;
        overflow: auto;
        box-shadow: 0px 0px 20px 0px rgba(0, 14, 59, 0.1);
        height: calc(100vh - 322px);
    }
}
</style>